<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font/iconfont.css">
    <link rel="stylesheet" href="css/font1/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="./font/login-font/iconfont.css" />
    <link rel="stylesheet" href="./css/login.css">
    <title>QQ音乐排行榜</title>
</head>

<body>
    <!-- 头部 -->
    <header class="header w100">
        <div class="header-box w1600">
            <div class="header-nav">
                <div class="logo">
                    <a href="" class="logo-a">
                        <img src="images/logo.png" alt="" class="logo-pic">
                    </a>
                </div>
                <nav class="mainnav">
                    <ul class="mainnav-ul">
                        <li class="mainnav-li active">
                            <a href="" class="mainnav-a">音乐馆</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">我的音乐</a>
                        </li>
                        <li class="mainnav-li mainnav-pop">
                            <a href="" class="mainnav-a">客户端
                                <img src="images/mark_1.png" alt="" class="mainnav-img">

                            </a>
                            <div class="pop-box">
                                <div class="pop-up">
                                    <ul class="pop-up-list">
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up1"></i>
                                            <span class="pop-text">HQ高品质 全员开启</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up2"></i>
                                            <span class="pop-text">独家音效 全面升级</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up3"></i>
                                            <span class="pop-text">轻盈视觉 动态皮肤</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <a href="" class="pop-update">下载体验</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">开放平台</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">VIP</a>
                        </li>
                    </ul>
                </nav>
                <!-- 搜索框 -->
                <div class="search">
                    <form action="">
                        <button class="btn-search"></button>
                        <input type="text" class="inp-search" name="keywords" id="keywords" autocomplete="off"
                            placeholder="搜索音乐、MV、歌单、用户">
                        <div class="search-box">
                            <div class="search-menu">
                                <ul class="search-list">
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">1</span>
                                            <p class="search-info">我们的歌</p>
                                            <span class="count">76.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">2</span>
                                            <p class="search-info">红尘客栈</p>
                                            <span class="count">176.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">3</span>
                                            <p class="search-info">水星记</p>
                                            <span class="count">100.9</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">4</span>
                                            <p class="search-info">林俊杰</p>
                                            <span class="count">44.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">5</span>
                                            <p class="search-info">错位时空</p>
                                            <span class="count">106.5</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 用户功能 -->
                <div class="user-functions">
                    <a href="" class="login">登录</a>
                    <div class="user-menu menu-vip menu-list">
                        <span class="menu-content">开通VIP</span>
                        <div class="drop-menu">
                            <a href="" class="drop-menu-links">开通绿钻豪华版</a>
                            <a href="" class="drop-menu-links">开通付费包</a>
                        </div>
                    </div>
                    <div class="user-menu menu-money menu-list">
                        <span class="menu-content">充值</span>
                        <div class="drop-menu">
                            <a href="" class="drop-menu-links">购买乐币</a>
                            <a href="" class="drop-menu-links">充值饭票</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 子导航 -->
            <div class="subnav">
                <ul class="subnav-list">
                    <li class="subnav-items ">
                        <a href="index.html" class="subnav-links">首页</a>
                    </li>
                    <li class="subnav-items">
                        <a href="singer.html" class="subnav-links">歌手</a>
                    </li>
                    <li class="subnav-items">
                        <a href="Newdisc.html" class="subnav-links">新碟</a>
                    </li>
                    <li class="subnav-items active">
                        <a href="top.html" class="subnav-links">排行榜</a>
                    </li>
                    <li class="subnav-items">
                        <a href="classify.html" class="subnav-links">分类歌单</a>
                    </li>
                    <li class="subnav-items">
                        <a href="MV.html" class="subnav-links">MV</a>
                    </li>
                    <li class="subnav-items">
                        <a href="radio.html" class="subnav-links">电台</a>
                    </li>
                    <li class="subnav-items">
                        <a href="Album.html" class="subnav-links">数字专辑</a>
                    </li>
                    <li class="subnav-items">
                        <a href="ticket.html" class="subnav-links">票务</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <main class="main w100">
        <section class="top w1600">
            <!-- 榜单-侧边栏 -->
            <aside class="top-aside">
                <div class="top-aside-wrapper">
                    <h2 class="top-aside-title">巅峰榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li ">
                            <a href="" class="top-aside-a">飙升榜</a>
                        </li>
                        <li class="top-aside-li active">
                            <a href="" class="top-aside-a">热歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">新歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">流行指数榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">喜力电音榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">腾讯音乐人原创榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">听歌识曲榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">MV榜</a>
                        </li>
                    </ul>
                </div>
                <div class="top-aside-wrapper">
                    <h2 class="top-aside-title">地区榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">内地榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">香港地区榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">台湾地区榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">欧美榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">韩国榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">日本榜</a>
                        </li>
                    </ul>
                </div>
                <div class="top-aside-wrapper">
                    <h2 class="top-aside-title">特色榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">网络歌曲榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">DJ舞曲榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">Q音快手榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">抖快榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">综艺新歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">影视金曲榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">国风热歌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">说唱榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">动漫音乐榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">游戏音乐榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">达人音乐榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">K歌金曲榜</a>
                        </li>
                    </ul>
                </div>
                <div class="top-aside-wrapper">
                    <h2 class="top-aside-title">全球榜</h2>
                    <ul class="top-aside-ul">
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">美国公告牌榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">美国热门音乐榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">韩国Melon榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">英国UK榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">日本公信榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">JOOX本地热播榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">香港TVB劲歌金榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">台湾KKBOX榜</a>
                        </li>
                        <li class="top-aside-li">
                            <a href="" class="top-aside-a">YouTube音乐排行榜</a>
                        </li>
                    </ul>
                </div>
            </aside>
            <!-- 榜单-内容 -->
            <div class="content-table">
                <!-- 头部 -->
                <div class="table-head mb10">
                    <h1 class="table-head-title">热歌榜</h1>
                    <button class="table-btn">
                        <i class="iconfont  icon-fanhui"></i>
                    </button>
                    <span class="table-head-span">06.03-06.09</span>
                    <button class="table-btn" disabled>
                        <i class="iconfont icon-gengduo"></i>
                    </button>
                    <a href="" class="table-head-a">榜单规则</a>
                </div>
                <!-- 按钮 -->
                <div class="con-tab-btn-box">
                    <div class="section-btn sp ">
                        <a href="" class="section-btn-link active">
                            <i class="iconfont icon-player-play "></i>
                            <span class="section-btn-text">播放全部</span>
                        </a>
                    </div>
                    <div class="section-btn">
                        <a href="" class="section-btn-link">
                            <i class="iconfont icon-tianjia"></i>
                            <span class="section-btn-text">添加到</span>
                        </a>
                    </div>
                    <div class="section-btn">
                        <a href="" class="section-btn-link">
                            <i class="iconfont icon-icon-test"></i>
                            <span class="section-btn-text">下载</span>
                        </a>
                    </div>
                    <div class="section-btn">
                        <a href="" class="section-btn-link">
                            <i class="iconfont icon-write "></i>
                            <span class="section-btn-text">批量操作</span>
                        </a>
                    </div>
                    <div class="section-btn">
                        <a href="" class="section-btn-link">
                            <i class="iconfont icon-comment "></i>
                            <span class="section-btn-text">评论(254571)</span>
                        </a>
                    </div>
                </div>
                <!-- 歌曲列表 -->
                <div class="song mb40">
                    <div class="song-head">
                        <ul class="song-head-ul">
                            <li class="song-head-li">歌曲</li>
                            <li class="song-head-li">歌手</li>
                            <li class="song-head-li">时长</li>
                        </ul>
                    </div>
                    <div class="song-list">
                        <ul class="song-list-ul">
                       
                        </ul>
                    </div>
                </div>
                <!-- 下载 -->
                <div class="update-box">
                    <h4 class="update-box-title mb20">查看更多内容，请下载客户端</h4>
                    <a href="" class="updete-box-link">立即下载</a>
                </div>
                <!-- 评论区 -->
                <div class="comment-wrapper">
                    <!-- 评论框 -->
                    <div class="comment mb20">
                        <h2 class="comment-title mb10">评论
                            <span class="comment-title-text">共235139条评论</span>
                        </h2>
                        <div class="comment-box">
                            <form action="">
                                <div class="comment-textarea mb10">
                                    <textarea name="comment" id="comment" placeholder="说说你的看法吧" rows="5"
                                        class="comment-input"></textarea>
                                    <span class="comment-textcount">剩余<em class="comment-totalnum">300</em>字</span>
                                </div>
                                <div class="comment-submitbox">
                                    <i class="comment-emoj"></i>
                                    <input type="submit" value="发表评论" class="btn-submit">
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- 精彩评论 -->
                    <div class="user-comments">
                        <h3 class="user-comment-title">精彩评论</h3>
                        <ul class="user-comment-ul">
                            <!-- 简洁版 -->
                            <li class="user-comment-li">
                                <div class="user-comment-box">
                                    <a href="" class="user-avatar">
                                        <img src="images/avatar/a1.jpg" alt="" class="user-avatar-pic">
                                    </a>
                                    <div class="user-information">
                                        <a href="" class="user-name">零。</a>
                                        <p class="comment-time">2018年3月26日 16:26</p>
                                        <p class="comment-text">喜欢花花！！！</p>
                                        <p class="comment-tips">
                                            <a href="" class="comment-like">
                                                <i class="icon-like"></i>
                                                <i class="icon-like-num">840</i>
                                            </a>
                                            <a href="" class="icon-reply">回复</a>
                                            <a href="" class="icon-report">举报</a>
                                        </p>
                                        <a href="" class="comment-open mb10">查看17条回复 <i
                                                class="comment-arrow-bottom"></i> </a>
                                    </div>
                                </div>

                                <!-- 简单回复 -->
                                <div class="comment-replay-simple">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">无：</a>
                                            <p class="comment-replay-content">
                                                我，我，，你？一个不？你是一家公司？你是一家！一、这样一来。在你！、一直到时候再说吧，我是。在这个城市、一定会不会更多的确很久:::.：一一一一一高贵轻
                                            </p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">29</i>
                                            </a>
                                        </li>
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">nivhrnᥬ😂᭄ᥬ🌚᭄：</a>
                                            <p class="comment-replay-content">我也是</p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">13</i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 展开回复框 -->
                                <div class="comment-replay-simple is-complete none">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g1.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Zz丶</a>
                                                    <p class="comment-time">2020年8月19日 20:23</p>
                                                    <p class="comment-text">宝宝们我的我的人生你要我去哪里。你要我去哪里玩</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g2.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Chihiro</a>
                                                    <p class="comment-time">2021年6月14日 17:56</p>
                                                    <p class="comment-text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g3.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">就是爱音乐</a>
                                                    <p class="comment-time">2022年3月26日 16:26</p>
                                                    <p class="comment-text">流量来坎坎坷坷健健康康快捷键就坎坎坷坷看看健健康康就看见健健康康进军看看健健康康健健康康</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!-- 复杂版 -->
                            <li class="user-comment-li">
                                <div class="user-comment-box">
                                    <a href="" class="user-avatar">
                                        <img src="images/avatar/a2.jpg" alt="" class="user-avatar-pic">
                                    </a>
                                    <div class="user-information">
                                        <a href="" class="user-name">Tsing_Summer</a>
                                        <p class="comment-time">2019年10月31日 22:53</p>
                                        <p class="comment-text">甘愿被你俘虏，为你全力以赴，愿做你手中的唯一猎物;地中海的水，蔚蓝得很纯粹，就像你的美，眼眸的深邃。
                                            欢迎大家收听《最高地位》，新风格歌曲，带你领略恋爱的甜蜜气息～</p>
                                        <p class="comment-tips">
                                            <a href="" class="comment-like">
                                                <i class="icon-like"></i>
                                                <i class="icon-like-num">111</i>
                                            </a>
                                            <a href="" class="icon-reply">回复</a>
                                            <a href="" class="icon-report">举报</a>
                                        </p>
                                        <a href="" class="comment-open mb10">查看3条回复 <i
                                                class="comment-arrow-bottom is-complete"></i> </a>
                                    </div>
                                </div>

                                <!-- 简单回复 -->
                                <div class="comment-replay-simple none">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">无：</a>
                                            <p class="comment-replay-content">
                                                我，我，，你？一个不？你是一家公司？你是一家！一、这样一来。在你！、一直到时候再说吧，我是。在这个城市、一定会不会更多的确很久:::.：一一一一一高贵轻
                                            </p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">29</i>
                                            </a>
                                        </li>
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">nivhrnᥬ😂᭄ᥬ🌚᭄：</a>
                                            <p class="comment-replay-content">我也是</p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">13</i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 展开回复框 -->
                                <div class="comment-replay-simple is-complete">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g1.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Zz丶</a>
                                                    <p class="comment-time">2020年8月19日 20:23</p>
                                                    <p class="comment-text">宝宝们我的我的人生你要我去哪里。你要我去哪里玩</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">35</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g2.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Chihiro</a>
                                                    <p class="comment-time">2021年6月14日 17:56</p>
                                                    <p class="comment-text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">78</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g3.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">就是爱音乐</a>
                                                    <p class="comment-time">2022年3月26日 16:26</p>
                                                    <p class="comment-text">流量来坎坎坷坷健健康康快捷键就坎坎坷坷看看健健康康就看见健健康康进军看看健健康康健健康康</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">42</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!-- 简洁版 -->
                            <li class="user-comment-li">
                                <div class="user-comment-box">
                                    <a href="" class="user-avatar">
                                        <img src="images/avatar/a3.jpg" alt="" class="user-avatar-pic">
                                    </a>
                                    <div class="user-information">
                                        <a href="" class="user-name">♚ 路人癸</a>
                                        <p class="comment-time">2019年4月26日 16:36</p>
                                        <p class="comment-text">到了无人之岛，当黎明前的黑暗来临时，想起桥边的姑娘阿刁，曾经的你笑起来真好看谁总是口是心非，这一切都是泡沫，怪我还年轻，没有听妈妈的话，一个人挺好，后来红日升起，明天肯定是晴天</p>
                                        <p class="comment-tips">
                                            <a href="" class="comment-like">
                                                <i class="icon-like"></i>
                                                <i class="icon-like-num">80</i>
                                            </a>
                                            <a href="" class="icon-reply">回复</a>
                                            <a href="" class="icon-report">举报</a>
                                        </p>
                                        <a href="" class="comment-open mb10">查看13条回复 <i
                                                class="comment-arrow-bottom"></i> </a>
                                    </div>
                                </div>

                                <!-- 简单回复 -->
                                <div class="comment-replay-simple">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">云中君☁️：</a>
                                            <p class="comment-replay-content">
                                                演员这是排多久了啊 我觉得只有谦谦自己再写一首新歌才能超过演员的成就了
                                            </p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">9</i>
                                            </a>
                                        </li>
                                        <li class="comment-replay-li">
                                            <a href="#" class="themecolor">太巧🌹：</a>
                                            <p class="comment-replay-content">哇哦，厉害了我的谦，一直被模仿从未被超越，支持的亲请为我们的谦点个赞，加油👉</p>
                                            <a href="" class="comment-like comment-like-tip">
                                                <i class="icon-like .comment-replay-dianzan"></i>
                                                <i class="icon-like-num">3</i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 展开回复框 -->
                                <div class="comment-replay-simple is-complete none">
                                    <ul class="comment-replay-ul">
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g1.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Zz丶</a>
                                                    <p class="comment-time">2020年8月19日 20:23</p>
                                                    <p class="comment-text">宝宝们我的我的人生你要我去哪里。你要我去哪里玩</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g2.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">Chihiro</a>
                                                    <p class="comment-time">2021年6月14日 17:56</p>
                                                    <p class="comment-text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="comment-replay-li">
                                            <div class="user-comment-box">
                                                <a href="" class="user-avatar">
                                                    <img src="images/avatar/g3.jpg" alt="" class="user-avatar-pic">
                                                </a>
                                                <div class="user-information">
                                                    <a href="" class="user-name">就是爱音乐</a>
                                                    <p class="comment-time">2022年3月26日 16:26</p>
                                                    <p class="comment-text">流量来坎坎坷坷健健康康快捷键就坎坎坷坷看看健健康康就看见健健康康进军看看健健康康健健康康</p>
                                                    <p class="comment-tips">
                                                        <a href="" class="comment-like">
                                                            <i class="icon-like"></i>
                                                            <i class="icon-like-num">840</i>
                                                        </a>
                                                        <a href="" class="icon-reply">回复</a>
                                                        <a href="" class="icon-report">举报</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- footer -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
            <div class="footer-box">
                <!-- 下载客户端 -->
                <div class="footer-update">
                    <h5 class="footer-title">下载QQ音乐客户端</h5>
                    <ul class="update-list">
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg1"></i>
                                PC版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg2"></i>
                                Mac版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg3"></i>
                                Android版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg4"></i>
                                iPhone版
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 特色产品 -->
                <div class="footer-product">
                    <h5 class="footer-title">特色产品</h5>
                    <ul class="update-list ">
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg5"></i>
                                全民K歌
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg6"></i>
                                银河音效
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg7"></i>
                                QPlay
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg8"></i>
                                Fan直播伴侣
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                车载互联
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                QQ演出
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 合作链接 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">合作链接</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">CJ ENM</a>
                        <a href="" class="footer-box-links">腾讯视频</a>
                        <a href="" class="footer-box-links">手机QQ空间</a>
                        <a href="" class="footer-box-links">最新版QQ</a>
                        <a href="" class="footer-box-links">腾讯社交广告</a>
                        <a href="" class="footer-box-links">电脑管家</a>
                        <a href="" class="footer-box-links">QQ浏览器</a>
                        <a href="" class="footer-box-links">腾讯微云</a>
                        <a href="" class="footer-box-links">腾讯云</a>
                        <a href="" class="footer-box-links">企鹅FM</a>
                        <a href="" class="footer-box-links">智能电视网</a>
                        <a href="" class="footer-box-links">当贝市场</a>
                        <a href="" class="footer-box-links">酷我音乐</a>
                        <a href="" class="footer-box-links">酷狗听书</a>
                    </div>
                </div>
                <!-- 开放平台 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">开放平台</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">QQ音乐开放平台</a>
                        <a href="" class="footer-box-links">腾讯音乐人</a>
                        <a href="" class="footer-box-links">音乐推</a>
                    </div>
                </div>
                <!-- TME集团官网 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">TME集团官网</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">腾讯音乐</a>
                    </div>
                </div>
            </div>
            <div class="footer-coopyright">
                <div class="coopyright-item">
                    <a href="" class="footer-box-links">关于腾讯 |</a>
                    <a href="" class="footer-box-links">About Tencent |</a>
                    <a href="" class="footer-box-links">服务条款 |</a>
                    <a href="" class="footer-box-links">用户服务协议 |</a>
                    <a href="" class="footer-box-links">隐私政策 |</a>
                    <a href="" class="footer-box-links">权利声明 |</a>
                    <a href="" class="footer-box-links">广告服务 |</a>
                    <a href="" class="footer-box-links">腾讯招聘 |</a>
                    <a href="" class="footer-box-links">客服中心 |</a>
                    <a href="" class="footer-box-links">网站导航</a>
                </div>
                <div class="coopyright-item">
                    Copyright © 1998 - 2022 Tencent.
                    <a href="" class="footer-box-links">All Rights Reserved.</a>
                </div>
                <div class="coopyright-item">
                    腾讯公司
                    <a href="" class="footer-box-links"> 版权所有 |</a>
                    <a href="" class="footer-box-links">营业执照 |</a>
                    网络文化经营许可证：
                    <a href="" class="footer-box-links">粤网文[2020]3396-195号 |</a>
                    客服电话:
                    <a href="" class="footer-box-links">4006016666</a>
                </div>
            </div>
        </div>
    </footer>
    <!-- 侧边栏 -->
    <aside class="side">
        <a href="" class="side-links">
            <i class="side-bg"></i>
        </a>
        <a href="" class="side-links">反馈</a>
        <a href="" class="side-links">
            <i class="side-bg music"></i>
        </a>
    </aside>
    <!-- 登录蒙层 -->
    <div class="mask none">
        <!-- 扫码登录 -->
        <div class="login1">
          <div class="login1-top">
            <!-- qq登录面板 -->
            <h3 class="login1-qq active">QQ登录</h3>
            <h3 class="login1-wechat">微信登录</h3>
          </div>
          <!-- qq登录面板扫码 -->
          <div class="login1-qq-content">
            <div class="login1-middle">
              <div class="login1-middle-left ">
                <div class="login1-middle-left-fast">
                  <h2>快捷登录</h2>
                  <p>
                    使用<a href="javascriot:;">QQ手机版</a>扫码登录，或点击头像授权登录。
                  </p>
                </div>
                <div class="login1-middle-left-qrcode">
                  <img src="./images/login/ptqrshow.png" al t="" />
                </div>
                <div class="login1-middle-left-choices">
                  <ul class="login1-middle-left-choices-ul">
                    <li class="lmlcu"><a href="#" class="login-pwd">密码登录</a></li>
                    <li class="lmlcu"><a href="javascript:;">注册帐号</a></li>
                    <li class="lmlcu"><a href="javascript:;">意见反馈</a></li>
                  </ul>
                </div>
              </div>
            <!-- qq密码登录面板 -->
              <div class="login1-middle-left none">
                <div class="login1-middle-left-fast">
                  <h2>密码登录</h2>
                  <p>
                    推荐使用<a href="#" class="login-pwd">快捷登录</a>，防止盗号。
                  </p>
                </div>
                <div class="login1-middle-left-qrcode">
                      <input type="text" name="" id="username" autocomplete="off" placeholder="支持QQ号/手机号/邮箱登录">
                      <input type="password" name="" id="pwd" autocomplete="off" placeholder="请输入密码">
                      <input type="button" value="提交" id="submit">
                </div>
                <div class="login1-middle-left-choices">
                  <ul class="login1-middle-left-choices-ul">
                    <li class="lmlcu"><a href="#">找回密码 </a></li>
                    <li class="lmlcu"><a href="#">注册帐号 </a></li>
                    <li class="lmlcu"><a href="#">意见反馈</a></li>
                  </ul>
                </div>
              </div>
    
              <div class="login1-middle-right">
                <ul class="login1-middle-right-ul">
                  <li class="lmru"><a href="#">QQ音乐</a>将获取以下权限：</li>
                  <li class="lmru">
                    <i class="iconfont icon-weixuanzhongyuanquan yuan"></i> 全选
                  </li>
                  <li class="lmru">
                    <i class="iconfont icon-dui"></i>使用你的QQ头像、昵称信息
                  </li>
                  <li class="lmru">
                    <i class="iconfont icon-weixuanzhongyuanquan yuan1"></i>你的QQ好友关系
                  </li>
                  <li class="lmru">
                    授权即同意 <a href="javascript:;"> 服务协议</a>和
                    <a href="javascript:;">QQ隐私保护指引</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="login1-bth">
              <a href="#">下载客户端 体验更多内容</a>
            </div>
          </div>
    
          <!-- 微信登录面板 -->
          <div class="login1-content-wechat none">
            <ul class="login1-content-wechat-ul">
              <li class="lcwu">
                <img src="./images/login/ptqrshow.png" alt="" />
              </li>
              <li class="lcwu">
                <p>使用微信扫一扫登录</p>
              </li>
              <li class="lcwu">
                <span>QQ与微信账号的音乐资产、付费特权不互通</span>
              </li>
              <li class="lcwu"><a href="#">下载客户端 体验更多内容</a></li>
            </ul>
          </div>
    
          <div class="close">×</div>
        </div>
      </div>
    
      <script src="./js/api.js"></script>
      <script src="./js/ajax.js"></script>
      <script src="./js/login.js"></script>
      <script src="./js/top.js"></script>

</body>

</html>